<template>
	<div class="clothes">
	    <div class="clothes_top">
                <h1 class="clothes_top_link3">Pants</h1>
		</div>
		   <!-- 区域分割线 -->
		     <div class="hotSale_line">
			  	   <div class="line"> </div>
			  	       <h2 class="hotSale_line_text"> 裤子专区<i class="iconfont icon-kuzi1"></i> </h2>
			  	   <div class="line"> </div>
			  </div>
		<!-- 商品列表区域 -->
		  <div class="clothes_list_sale">
			    <!-- 单个项目 -->
				<div v-for="(i,index) in clothes" :key="index" @click="select(i.id)" class="Citem">
					 <a href="javascript:;">
						  <img  v-lazy="i.firstImage" width="100%" height="85%">
                          <p>{{i.name}}</p>
						  <p class="Citem_price">¥{{i.price}}</p>
					 </a>
				</div>
		  </div>
	</div>
</template>

<script >
import axios from 'axios'

	export default {
		data () {
			return {
				 
                  clothes:[]
			}
		},
		created() {
		     
		},
		mounted(){
			 this.showGoods();
		},

		methods:{
			select(id){
				this.$router.push({
					path: `/pathGoods/${id}`
				})
			},
				showGoods(){
				 axios.get('/path').then( (response) => {
					  this.clothes = response.data;
				 })
			}
		}
	}
</script>

<style >
    .clothes{
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
	} 
	.clothes_top{
		
		widows: 380px;
		height: 200px;
        background-image: url(../../../../static/clother/img/5183804.jpg);
	}
	.clothes_top_link3{
	 line-height:200px; 
	 text-align: 20em;
	 color: white;
	 text-indent: 1em;
	 font-style: italic;
	 font-weight: bold;
	 font-size: 60px;
	 font-family:'Tahoma','Helvetica','Arial';

	}
  /* 商品列表区域 */
	.clothes_list_sale{
		   margin: 0 auto;
           width: 70%;
		   height: 100%;
		   display: flex;
		   align-items: flex-start; 
		    flex-wrap: wrap;
	}
	
	.Citem{
		 width: 180px;
		 height: 280px;
		 background: rgb(214, 227, 233);
		 display: inline-block;
		 margin:20px;
		 transition: all 0.4s
		
		 
	}
	.Citem:hover{
            box-shadow: 5px 5px 20px #9e9e9e;
			border-bottom-right-radius: 30px;
			background: #f7cfa3;
			color: antiquewhite;
	
	}
	.Citem a{
		 font-size:13px;
		 text-decoration: none;
		 color: #333;
		 text-align: center; 
		
	}

   .Citem_price{
		width: 100%;
		color: rgb(175, 27, 27);
		font-size: 13px;
		text-align: center;
	}
	/* 区域分割线 */
		.hotSale_line{
		text-align: center;
		  margin:0 auto;
		  margin-top:30px;
		  width: 70%;
		  height: 40px;
		  line-height: 40px;
		  /*border-bottom: 1px solid #607d8b;*/
		  /*background-color: red;*/
	}
	.line{
		display: inline-block;
		width: 200px;
		height: 10px;
		border-bottom: 1px solid #607d8b;
		position: relative;
		top:-5px;
        
	}

	.hotSale_line_text{
		display: inline-block;
		color: #333;
		font-family:'SimHei','新宋体';

	}
   .icon-kuzi1{
	    font-size: 20px;
   }
	/*热卖单品的火的icon*/
	.iconClothes{
		color: #67bbbb;
	}

</style>